<!--首页统计-->
<template>
  <div class="app-container">
    <!--第一行-->
    <div class="card">
      <p>我的数据</p>
      <div class="row">
        <div class="col">
          <div class="dingdanshuliang">
            <div class="wrap-line">
              <el-input placeholder="请输入账号"/>
              <el-input placeholder="请输入账号"/>
              <el-input placeholder="请输入账号"/>
            </div>
            <div class="wrap-line">
              <el-input placeholder="请输入账号"/>
              <el-button class="search">一键查询</el-button>
              <el-button class="confirm">确认提号</el-button>
              <el-button class="confirm">提交售后</el-button>
            </div>
          </div>
        </div>

        <div class="col col-count">
          <div class="wrap">
            <img src="../assets/home/dingdanxiaoliang.png" alt="">
            <div class="count">
              <div class="count-num">
                {{ 0 }}
              </div>
              <div class="count-txt">销售金额</div>
            </div>
          </div>
        </div>

        <div class="col col-count">
          <div class="wrap">
            <img src="../assets/home/huishoudanliang.png" alt="">
            <div class="count">
              <div
                class="count-num">
                {{ 0 }}
              </div>
              <div class="count-txt">回收单量</div>
            </div>
          </div>
        </div>

        <div class="col col-count">
          <div class="wrap">
            <img src="../assets/home/huishoujine.png" alt="">
            <div class="count">
              <div
                class="count-num">
                {{ 0 }}
              </div>
              <div class="count-txt">回收金额</div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!--查询form-->
    <el-form :model="queryParams" ref="queryForm" size="small">
      <el-row type="flex" class="rows">
        <el-col class="cols">
          <el-form-item prop="account">
            <el-input v-model="queryParams.account" placeholder="请输入账号" @keyup.enter.native="getList(1)"/>
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="orderNumber">
            <el-input v-model="queryParams.orderNumber" placeholder="请输入回收编号" @keyup.enter.native="getList(1)"/>
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="saleId">
            <el-input v-model="queryParams.saleId" placeholder="请输入销售编号" @keyup.enter.native="getList(1)"/>
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="abnormityReason">
            <el-input v-model="queryParams.abnormityReason" placeholder="请输入异常原因"
                      @keyup.enter.native="getList(1)"/>
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="dictCodeId">
            <el-select v-model="queryParams.dictCodeId" placeholder="请选择游戏品类" @change="getList(1)">
              <el-option v-for="item in gameList" :key="item.dictCode" :label="item.dictLabel"
                         :value="item.dictCode"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!--查询-->
      <div class="btns">
        <!--刷新-->
        <div class="wrap" @click="getList()">
          <img src="../assets/images/refresh.png"/>
        </div>

        <!--重置-->
        <div class="wrap" @click="resetQuery">
          <img src="../assets/images/search.png"/>
        </div>
      </div>
    </el-form>

    <!--列表-->
    <el-table v-loading="loading" :data="managementList" @selection-change="handleSelectionChange" stripe>
      <el-table-column label="编号" align="center" min-width="80" fixed>
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="绑定手机" align="center" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.phoneNumber == null" style="color: red;">已解绑</span> <span
          v-else>{{ scope.row.phoneNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机编号" align="center" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.phoneCode == null" style="color: red;">暂无</span> <span
          v-else>{{ scope.row.phoneCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售渠道" align="center" prop="saleChannel">
        <template slot-scope="scope">
          <span> {{ scope.row.saleChannel ? scope.row.saleChannel : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售编号" align="center" prop="saleId">
        <template slot-scope="scope">
          <span> {{ scope.row.saleId ? scope.row.saleId : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" min-width="80">
        <template slot-scope="scope">
            <span v-if="scope.row.problemType == 'UnsoldRecovered'"
                  class="status status-unsold-recovered">未售找回</span>
          <span v-if="scope.row.problemType == 'UnsoldException'"
                class="status status-unsold-exception">未售异常</span>
          <span v-if="scope.row.problemType == 'SoldRecovered'" class="status status-sold-recovered">已售找回</span>
          <span
            v-if="scope.row.problemType == 'SoldException'" class="status status-sold-exception">已售异常</span> <span
          v-if="scope.row.problemType == 'SoldAccompanied'" class="status status-sold-exception">已售已赔</span> <span
          v-if="scope.row.problemType == 'SoldChangeBinding'"
          class="status status-sold-change-binding">已售未换绑</span>
        </template>
      </el-table-column>
      <el-table-column label="账号描述" min-width="200" align="center" class-name="description-cell">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top">
            <p class="hover-multi-line">{{ $line(scope.row.accountDescription) }}</p>
            <div slot="reference" class="hover-slot-line">
              {{ scope.row.accountDescription ? scope.row.accountDescription : '-' }}
            </div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.accountDescription)">复制
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="账号" align="center" prop="account" min-width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span> {{ scope.row.account ? scope.row.account : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="密码" align="center" prop="password" min-width="120">
        <template slot-scope="scope">
          <span> {{ scope.row.password ? scope.row.password : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号编号" align="center" prop="identifying" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.identifying ? scope.row.identifying : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售金额" align="center" prop="saleAmount" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.saleAmount ? scope.row.saleAmount : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回收金额" align="center" prop="recycleAmount" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.recycleAmount ? scope.row.recycleAmount : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回收渠道" align="center" prop="recycleChannelName" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.recycleChannelName ? scope.row.recycleChannelName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回收客服" align="center" prop="recycleName" min-width="100">
        <template slot-scope="scope">
          <span> {{ scope.row.recycleName ? scope.row.recycleName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回收编号" align="center" min-width="100">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top">
            <p class="hover-multi-line">{{ $line(scope.row.orderNumber) }}</p>
            <div slot="reference" class="hover-slot-line">
              {{ scope.row.orderNumber ? scope.row.orderNumber : '-' }}
            </div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.orderNumber)">复制
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="异常原因" align="center" prop="abnormityReason" min-width="200">
        <template slot-scope="scope">
            <span @click="changeRemark(scope.row)" v-if="scope.row.id != selectRemark"> {{
                scope.row.abnormityReason ? scope.row.abnormityReason : '-'
              }}</span>
          <input style="width: 100px;" v-else type="text" @blur="blurRemark(scope.row)"
                 v-model="form.abnormityReason">
        </template>
      </el-table-column>
      <el-table-column label="入库时间" align="center" prop="storageTime" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.storageTime ? parseTime(scope.row.storageTime, '{y}-{m}-{d}') : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="异常时间" align="center" prop="abnormityTime" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.abnormityTime ? scope.row.abnormityTime : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center" prop="createBy" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createBy ? scope.row.createBy : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="190">
        <template slot-scope="scope">
          <!--待处理-->
          <div v-if="queryParams.problemType == 'WaiToDo'">
            <el-button slot="reference" size="mini" type="text" @click="handleGetInfo(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);">拉取信息</span>
            </el-button>
            <el-button slot="reference" size="mini" type="text" @click="handleCreateOrder()">
              <span style="color: rgba(83, 90, 244, 1);">创建订单</span>
            </el-button>
          </div>

          <!--处理完成-->
          <div v-else-if="queryParams.problemType == 'Accomplished'">
            <!--<el-button slot="reference" size="mini" type="text" v-hasPermi="['business:exception:completeCheckout']">-->
            <!--  <span style="color: rgba(83, 90, 244, 1);">查看</span>-->
            <!--</el-button>-->

            <el-button size="mini" type="text" @click="handleView(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">查看</span>
            </el-button>
          </div>

          <!--其他-->
          <div v-else>
            <el-button size="mini" type="text" @click="handleUpdate(scope.row,'恢复入库')"
                       v-hasPermi="['business:exception:returnStorage']">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px;">恢复入库</span>
            </el-button>

            <el-popconfirm v-if="scope.row.problemType == 'SoldException'" title="您确定完结出库吗？"
                           @confirm="submitFormNotation(scope.row)">
              <el-button slot="reference" size="mini" type="text" v-hasPermi="['business:exception:completeCheckout']">
                <span style="color: rgba(83, 90, 244, 1);">完结出库</span>
              </el-button>
            </el-popconfirm>
            <el-button v-else size="mini" type="text" @click="handleNotation(scope.row)"
                       v-hasPermi="['business:exception:completeCheckout']">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">完结出库 </span>
            </el-button>

            <el-button size="mini" type="text" @click="handleView(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">查看</span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination class="pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList('')"/>

  </div>
</template>


<script>
import {
  addManagement,
  unboundPhonesByCategory
} from '@/api/business/staylnventory'
import {
  listManagement,
  getStatistics,
  returnStorage,
  completeCheckout,
  modifyExceptionCause,
  getWaitingToDoApi,
  completedList
} from '@/api/business/abnormal'
import {myMixins} from "@/mixins/index.js";
import env from "@/utils/config.js";

export default {
  mixins: [myMixins],
  name: 'Management',
  data() {
    return {
      radioArr: [{
        name: '未售找回',
        val: 'UnsoldRecovered'
      }, {
        name: '未售异常',
        val: 'UnsoldException'
      }, {
        name: '已售找回',
        val: 'SoldRecovered'
      }, {
        name: '已售异常',
        val: 'SoldException'
      }, {
        name: '已售已赔',
        val: 'SoldAccompanied'
      }, {
        name: '待确认',
        val: 'WaiToDo'
      }, {
        name: '处理完成',
        val: 'Accomplished'
      }],
      imgUrl: '',//上传图片地址
      // 属性配置回显
      result: [],
      //选中的备注
      selectRemark: null,
      //状态数据
      TodayCount: '',
      status: {},
      dialogImageUrl: '',
      dialogVisible: false,
      //销售渠道
      saleChannelList: [],
      //库存状态列表
      stockStatusList: [],
      //绑定手机列表
      phoneList: [],
      //换绑客服
      changeList: [],
      //回收客服
      recycleList: [],
      //销售客服
      sellList: [],
      regionalServers: [],
      //二次实名
      secondaryRealNameList: [],
      //回收列表
      recycleChannelList: [],
      //渠道列表
      bindingChannelList: [],
      //区服列表
      regionList: [
        {label: '3936区', value: '3936'}
      ],
      //游戏列表
      gameList: [],
      activeGame: '',
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      managementList: [
        {}
      ],
      // 弹出层标题
      title: '',
      // 是否显示新增弹出层
      open: false,
      // 是否显示提号弹出层
      openNotation: false,
      // 是否显示转问题弹出层
      openProblem: false,
      //当前绑定的手机号和渠道
      bindingChannelId: '',
      phoneData: {
        phoneCode: null,
        phoneId: null,
        phoneNumber: null
      },
      // 查询参数
      queryParams: {
        problemType: '',
        pageNum: 1,
        pageSize: 10,
        accountDescription: null,
        recycleChannelId: null,
        account: null, // 账号
        saleId: null, // 销售编号
        abnormityReason: null, //异常原因
        status: null,
        orderNumber: null, // 回收编号
        dictCodeId: '',//游戏品类编号
      },
      // 表单参数
      form: {
        checkList: []
      },
      // 提号表单参数
      formNotation: {
        orderRemark: '未追回赔付订单'
      },
      disabled: false,
      // 表单校验
      rules: {
        bindingChannelId: [
          {required: true, message: '绑定类目不能为空', trigger: 'change'}
        ],
        phoneId: [
          {required: true, message: '绑定手机不能为空', trigger: 'change'}
        ],
        expenditureAccount: [
          {required: true, message: '支出金额不能为空', trigger: 'blur'}
        ],
        incomeAccount: [
          {required: true, message: '收入金额不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.imgUrl = env;
    this.getList()

    //查询游戏列字典
    this.getDicts('game_category').then(res => {
      this.gameList = res.data
    })
    //查询绑定渠道字典
    this.getDicts('binding_channel').then(res => {
      this.bindingChannelList = res.data
    })
    //查询回收渠道字典
    this.getDicts('recycle_channel').then(res => {
      this.recycleChannelList = res.data
    })
    //查询二次实名字典
    this.getDicts('secondary_real_name').then(res => {
      this.secondaryRealNameList = res.data
    })
    //查询状态字典
    this.getDicts('stock_status').then(res => {
      this.stockStatusList = res.data
    })
    //查询销售渠道
    this.getDicts('sale_channel').then(res => {
      this.saleChannelList = res.data
    })
    //查询回收客服
    this.passPost('recycle').then(res => {
      this.recycleList = res.data
    })
    //查询换绑客服
    this.passPost('change').then(res => {
      this.changeList = res.data
    })
    //查询销售客服
    this.passPost('sell').then(res => {
      this.sellList = res.data
    })
  },

  methods: {

    // 拉取信息
    handleGetInfo(item) {
      this.$refs.getInfo.handleOpen(item.account, item.id);
    },

    // 创建订单
    handleCreateOrder() {
      this.$refs.createOrder.handleOpen();
    },

    // 复制
    handleCopy(e) {
      const el = document.createElement('textarea');
      el.value = e;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      // 通知用户已复制
      this.$message({
        message: '复制成功！',
        type: 'success'
      });
    },

    // 后边添加上传图片
    handleSuccess(res, file, fileList) {
      if (!Array.isArray(this.form.imagess)) {
        this.$set(this.form, 'imagess', []);
      }
      this.form.imagess.push(res.url);
    },

    // 删除照片
    handleDel(indx) {
      this.form.imagess.splice(indx, 1);
    },

    // 游戏品类切换
    handleGameCategoryChange() {
      this.regionalServers = [];
      this.listDictData({
        dictCodeId: this.form.dictCodeId
      });
    },

    //离开备注框
    blurRemark(row) {
      this.selectRemark = null
      modifyExceptionCause(this.form).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },

    //点击备注框
    changeRemark(row) {
      this.selectRemark = row.id
      this.form = {...row}
    },

    handleAvatarSuccess(response, file) {
      // 假设服务器响应的数据中包含了文件路径 'url'
      this.form.images = response.url // 更新 form.image 为服务器返回的 URL
    },

    beforeAvatarUpload(file) {
      const isJPEG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const jsJPG = file.type === 'image/jpg'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPEG && !isPNG && !jsJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }
      return true;
    },

    //选中分类事件
    changeChannel(value) {
      this.form.phoneId = null
      this.form.phoneCode = null
      this.bindingChannelList.forEach(item => {
        if (item.dictCode == value) {
          unboundPhonesByCategory(item.dictValue)
            .then(res => {
              this.phoneList = res.data
              if (this.bindingChannelId == value) {
                this.phoneList.unshift(this.phoneData)
              }
            })
          return
        }
      })
    },

    //切换Tab
    handleGame(tab) {
      this.queryParams.problemType = tab;
      this.getList(1);
    },

    /** 查询列表 */
    getList(num) {
      if (num) this.queryParams.pageNum = num;
      this.loading = true;
      if (this.queryParams.problemType == 'WaiToDo') {//待处理
        getWaitingToDoApi(this.queryParams).then(res => {
          this.managementList = res.rows
          this.total = res.total
          this.loading = false
        })
      } else if (this.queryParams.problemType == 'Accomplished') {//处理完成
        completedList(this.queryParams).then(res => {
          this.managementList = res.rows
          this.total = res.total
          this.loading = false
        })
      } else {
        getStatistics().then(res => {
          this.status = res.data
          this.TodayCount = res.data.TodayCount
        });
        listManagement(this.queryParams).then(response => {
          this.managementList = response.rows
          this.total = response.total
          this.loading = false
        })
      }
    },

    //新增 取消按钮
    cancel() {
      this.open = false;
      this.disabled = false;
      this.reset()
    },

    //新增 表单重置
    reset() {
      this.form = {
        phoneCode: null,
        phoneId: null,
        imagess: [],
        checkList: []
      }
      // this.resetForm('form')
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '新增账号'
    },

    /** 新增 确认提交 */
    submitForm() {
      let dropDownMap = {}, inputValuesObj = {}, radioSelectionsObj = {}, info = {}, checkboxArr = [];
      for (var key in this.form) {
        // 下拉框
        if (key.indexOf('dropDown') > -1) {
          dropDownMap[key.split('_')[1]] = this.form[key];
        }

        // 输入框
        if (key.indexOf('inputValues') > -1) {
          inputValuesObj[key.split('_')[1]] = this.form[key]
        }

        // 单选框
        if (key.indexOf('radioValues') > -1) {
          radioSelectionsObj[key.split('_')[1]] = this.form[key]
        }

        // 多选框
        if (key.indexOf('checkbox') > -1) {
          info[key] = this.form[key];
          checkboxArr = checkboxArr.concat(this.form[key])
        }
      }

      let attr = {
        radioSelections: radioSelectionsObj,
        dropDown: dropDownMap,
        inputValues: inputValuesObj,
        checkbox: info,
        checkList: checkboxArr
      }
      this.form.attribute = attr;
      this.form.answer = JSON.stringify(attr);

      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            returnStorage(this.form).then(response => {
              this.$modal.msgSuccess('恢复入库成功')
              this.open = false
              this.getList()
            })
          } else {
            addManagement(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

    //提号 取消按钮
    cancelNotation() {
      this.openNotation = false
      this.resetNotation()
    },

    //提号 表单重置
    resetNotation() {
      this.formNotation = {}
      this.resetForm('formNotation')
    },

    /** 提号按钮操作 */
    handleNotation(row) {
      this.resetNotation()
      this.openNotation = true
      this.formNotation = {
        ...row,
        orderRemark: '未追回赔付订单',
        category: '找回赔付',
        saleAmount: row.saleAmount

      }
    },

    // 查看
    handleView(item) {
      this.disabled = true;
      this.handleUpdate(item, '查看');
    },

    /** 提号 确认提交 */
    submitFormNotation(row) {
      if (row) {
        this.formNotation = {
          ...row
        }
      }
      completeCheckout(this.formNotation).then(response => {
        this.$modal.msgSuccess('成功')
        this.openNotation = false
        this.getList()
      })
    },

    //转问题 取消按钮
    cancelProblem() {
      this.openProblem = false
      this.resetProblem()
    },
    //转问题 表单重置
    resetProblem() {
      this.formProblem = {}
      this.resetForm('formProblem')
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList(1)
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('business/stock/export', {
        ...this.queryParams
      }, `management_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>

<style lang="scss" scoped>

@function vw($width) {
  @return ($width * 100vw / 1920);
}

@function vh($height) {
  @return ($height * 100vh / 1080);
}

.app-container {
  background-color: #EDEFF9;
  padding: 30px;

  p {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    font-feature-settings: "kern" on;
    color: #3D3D3D;
    margin: 0 0 18px 8px;

    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 50%;
      left: -8px;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      background-color: #116BFF;
      border-radius: 2px;
    }
  }

  .card {
    padding: 20px 20px 0px 20px;
    background-color: #F5F6FB;
    border-radius: 16px;
    margin-bottom: vh(20);

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .col {
        background-color: #F6F7FA;
        border-radius: 16px;
        flex: 1;
        margin-bottom: 20px;
        margin-right: vw(20);

        .wrap-line {
          display: flex;
          margin-bottom: 12px;

          ::v-deep.el-input {
            min-width: 158px;
            margin-right: 20px;

            &:nth-child(3) {
              margin-right: 0;
            }

            .el-input__inner {
              font-size: 14px;
              height: 38px;
              color: #0060FF;
              border: 1px solid #A3BBE2;
              border-radius: 10px;
              background-color: #F9FAFB;
            }
          }

          .el-button {
            height: 38px;
            border: 0;
          }

          .confirm {
            background-color: #116BFF;
            color: #fff;
            margin-left: 23px;
          }

          .search {
            border: 1px solid #116BFF;
            color: #116BFF;
            background-color: transparent;
          }
        }

        .wrap {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 130px;
          padding-left: 30px;
          width: 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          overflow: hidden;
          background-color: #fff;
          border-radius: 16px;

          img {
            width: 78px;
            height: 78px;
            margin-right: 10%;
            border-radius: 14px;
            box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
          }

          .b3 {
            box-shadow: 0px 11px 28px -2px rgba(175, 70, 54, 0.33);
          }

          .count {
            .count-num {
              font-size: 24px;
              font-weight: 900;
              line-height: normal;
              font-feature-settings: "kern" on;
              color: #3D3D3D;
              margin-bottom: 16px;
            }

            .count-txt {
              font-size: 12px;
              color: #A5AAB3;
            }
          }
        }

        .dingdanshuliang {
          background-color: #fff;
          border-radius: 16px;
          padding: 22px 36px 14px;
        }

        .huishoudanliang {
          background-image: url("../assets/home/huishoudanliang_bg.png");

          img {
            box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
          }
        }

        .huishoujine {
          background-image: url("../assets/home/huishoujine_bg.png");

          img {
            box-shadow: 0px 11px 28px -2px rgba(175, 70, 54, 0.33);
          }
        }
      }

      .col-count {
        min-width: 240px;
      }
    }
  }

  /*列表*/
  ::v-deep.el-table {
    border-radius: 16px 16px 0 0;

    th {
      height: 50px;
      background: #488DFE;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #fff;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    td {
      height: 50px;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #3D3D3D;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    .el-table__body tr {
      &:nth-child(odd) {
        background-color: #FEFEFE;
      }

      &:nth-child(even) {
        background-color: #F8FAFE;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background-color: #E4E8F5;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #3380FD;
      }
    }

    .status {
      display: block;
      width: 54px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      opacity: 0.8;
      border-radius: 4px;
      font-size: 12px;
      transition: opacity 0.3s ease-in-out;
    }

    .normal {
      color: #00B3A7;
      background-color: #E0F7FA;
    }

    .tradingIn {
      color: #FFA500;
      background-color: #ffeac9;
    }

    .soldOut {
      color: #FF0000;
      background-color: #ffdada;
    }

    .abnormal {
      color: #FF00FF;
      background-color: #FFE4FF;
    }

    .cancelled {
      color: #a19f9f;
      background-color: #ececec;
    }
  }

  /*分页*/
  .pagination {
    background-color: transparent !important;

    ::v-deep.el-pagination {
      display: flex;
      align-items: center;

      .number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 8px;
      }

      .el-pager > .el-icon {
        height: 40px;
        width: 40px;
        background: #fff;
        line-height: 40px;
        border-radius: 8px;
      }
    }
  }
  ::v-deep.el-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 10px;
    border-radius: 16px 16px 0 0;
    background: #3A84FF;
    margin-bottom: 30px;

    .rows {
      flex-wrap: wrap;
      width: 82%;

      .cols {
        width: 200px;
        margin: 0 10px 10px 0;

        .el-form-item {
          margin-bottom: 0 !important;
        }
      }

      .el-range-input {
        color: #0060FF;
        font-size: 12px;
      }

      .el-input__inner {
        border: 0;
        font-size: 12px;
        width: 200px;
        height: 38px;
        color: #0060FF;
      }
    }

    .btns {
      display: flex;

      ::v-deep.el-button {
        background-color: #fff;
        margin-left: 12px;
        color: #3380FD;

        .el-icon-plus {
          &::after {
            content: "";
            font-weight: bold;
          }
        }
      }

      .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: #FFFFFF;
        border: 1px solid #116BFF;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>
